<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.7.1.min.js"></script>
    <script>
        function updateGoods(goodsId, goodsName, purchasePrice, salePrice, stockNum, userId) {
            $("#update_goodsName").val(goodsName)
            $("#update_goodsId").val(goodsId)
            $("#update_purchasePrice").val(purchasePrice)
            $("#update_salePrice").val(salePrice)
            $("#update_stockNum").val(stockNum)
            $("#update_userId").val(userId)
            var option = document.querySelectorAll("#update_userId option")
            option.forEach((optionItem, optionIndex) => {
                if (userIdArg === optionItem.value) {
                    optionItem.selected = true
                }
            })
        }

        function addGoods() {
            const goodsName = $("#add_goodsName").val()
            const purchasePrice = $("#add_purchasePrice").val()
            const salePrice = $("#add_salePrice").val()
            const stockNum = $("#add_stockNum").val()
            const userId = $("#add_userId").val()
            let formData = new FormData();
            formData.append("goodsName", goodsName);
            formData.append("purchasePrice", purchasePrice);
            formData.append("salePrice", salePrice);
            formData.append("stockNum", stockNum);
            formData.append("userId", userId);
            $.ajax({
                url: "${pageContext.request.contextPath}/addGoods",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/goodsTable"
                    }
                }
            });
        }

        function deleteGoods(goodsId) {
            let formData = new FormData();
            formData.append("goodsId", goodsId);
            $.ajax({
                url: "${pageContext.request.contextPath}/deleteGoods",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/goodsTable"
                    }
                }
            });
        }

        function doUpdateGoods() {
            const goodsId = $("#update_goodsId").val()
            const goodsName = $("#update_goodsName").val()
            const purchasePrice = $("#update_purchasePrice").val()
            const salePrice = $("#update_salePrice").val()
            const stockNum = $("#update_stockNum").val()
            const userId = $("#update_userId").val()
            let formData = new FormData();
            formData.append("goodsId", goodsId);
            formData.append("goodsName", goodsName);
            formData.append("purchasePrice", purchasePrice);
            formData.append("salePrice", salePrice);
            formData.append("stockNum", stockNum);
            formData.append("userId", userId);
            $.ajax({
                url: "${pageContext.request.contextPath}/updateGoods",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/goodsTable"
                    }
                }
            });
        }
    </script>
    <script>
        function search(){
            var goodsName = $("#search").val();
            let formData2 = new FormData();
            if(goodsName!==null&&goodsName!==''){
                formData2.append("goodsName", goodsName);
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/selectGoodsBySelective",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData2,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    const goods = data.data.goodss;
                    console.log(goods)
                    if (data.flag === 1) {
                        let str = ''
                        goods.forEach((uItem, uIndex) => {
                                const timestamp =goods[uIndex].numUpdateDate;
                                const date = new Date(timestamp);
                                let utcString = date.toUTCString();
                                if(timestamp===null){
                                    utcString = ''
                                }
                                str += `
                                    <tr >
                                        <td>` + (uIndex+1) + `</td>
                                        <td>` + goods[uIndex].goodsName + `</td>
                                        <td>` + goods[uIndex].purchasePrice + `</td>
                                        <td>` + goods[uIndex].salePrice + `</td>
                                        <td>` + goods[uIndex].stockNum + `</td>
                                        <td>` + utcString+ `</td>
                                        <td>` + goods[uIndex].user.userName + `</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateGoods('`+goods[uIndex].goodsId+`','`+goods[uIndex].goodsName+`','`+goods[uIndex].purchasePrice+`','`+goods[uIndex].salePrice+`','`+goods[uIndex].stockNum+`','`+goods[uIndex].user.userId+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteGoods('`+goods[uIndex].goodsId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                        })
                        $('table tbody').html(str);
                    }
                }
            });
        }
    </script>
    <!-- 自定义CSS样式 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/assets/css/reset.css">
    <style>
        td, tr, th {
            text-align: center;
            line-height: 54px;
        }
    </style>
</head>

<body>
<div class="row shadow-none p-3 mb-5 bg-light rounded fixed-top">
    <div class="col ">
        <div class="input-group mb-3">
            <input type="text"
                   id="search"
                   class="form-control"
                   placeholder="商品名称"
                   aria-label="Recipient's username"
                   aria-describedby="button-addon2">
            <div class="input-group-append">
                <button class="btn  btn-primary"
                        type="button"
                        id="button-addon2"
                        onclick="search()">查询
                </button>
            </div>
        </div>
    </div>
    <div class="col">
        <button type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#addUser">添加
        </button>
    </div>
</div>


<table class="table table-hover " style="margin-top: 100px;margin-bottom: 100px">
    <thead>
    <tr>
        <th scope="col">序号</th>
        <th scope="col">商品名称</th>
        <th scope="col">进价</th>
        <th scope="col">销售价格</th>
        <th scope="col">库存</th>
        <th scope="col">库存更新时间</th>
        <th scope="col">供应商</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="goods" items="${goods}" varStatus="index">
        <tr>
            <th scope="row">${index.index+1}</th>
            <td>${goods.goodsName}</td>
            <td>${goods.purchasePrice}</td>
            <td>${goods.salePrice}</td>
            <td style="color: ${goods.stockNum<10?"red":""}">${goods.stockNum}</td>
            <td>${goods.numUpdateDate}</td>
            <td>${goods.user.userName}</td>
            <td>
                <button type="button"
                        class="btn btn-warning"
                        data-bs-toggle="modal"
                        data-bs-target="#updateUser"
                        onclick="updateGoods(${goods.goodsId},
                                '${goods.goodsName}',
                            ${goods.purchasePrice},
                            ${goods.salePrice},
                            ${goods.stockNum},
                            ${goods.userId})">修改
                </button>
                <button type="button"
                        class="btn btn-danger"
                        onclick="deleteGoods(${goods.goodsId})">删除
                </button>
            </td>
        </tr>
    </c:forEach>

    </tbody>
</table>


<!-- 增加用户 -->
<div class="modal fade"
     id="addUser"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="exampleModalLabel">添加商品</h1>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="add_goodsName"
                           class="col-sm-2 col-form-label">名称</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_goodsName">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_purchasePrice"
                           class="col-sm-2 col-form-label">进价</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_purchasePrice">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_salePrice"
                           class="col-sm-2 col-form-label">售价</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_salePrice">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_stockNum"
                           class="col-sm-2 col-form-label">库存</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_stockNum">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_userId"
                           class="col-sm-2 col-form-label">供应商</label>
                    <div class="col-sm-10">
                        <select class="form-select"
                                id="add_userId"
                                aria-label="Default select example">
                            <c:forEach var="supplier" items="${suppliers}">
                                <option value="${supplier.userId}">${supplier.userName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">取消
                </button>
                <button type="button"
                        class="btn btn-primary"
                        onclick="addGoods()">添加
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户 -->
<div class="modal fade"
     id="updateUser"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="exampleModalLabel2">修改用户</h1>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="update_goodsName"
                           class="col-sm-2 col-form-label">名称</label>
                    <div class="col-sm-10">
                        <input type="hidden" id="update_goodsId">
                        <input type="text"
                               class="form-control"
                               id="update_goodsName">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="update_purchasePrice"
                           class="col-sm-2 col-form-label">进价</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="update_purchasePrice">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="update_salePrice"
                           class="col-sm-2 col-form-label">售价</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="update_salePrice">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="update_stockNum"
                           class="col-sm-2 col-form-label">库存</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="update_stockNum">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="update_userId"
                           class="col-sm-2 col-form-label">供应商</label>
                    <div class="col-sm-10">
                        <select class="form-select"
                                id="update_userId"
                                aria-label="Default select example">
                            <c:forEach var="supplier" items="${suppliers}">
                                <option value="${supplier.userId}">${supplier.userName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">取消
                </button>
                <button type="button"
                        class="btn btn-warning"
                        onclick="doUpdateGoods()">修改
                </button>
            </div>
        </div>
    </div>
</div>


<script>

</script>

<script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>


</body>


</html>